<template>
  <aside class="left-nav">
    <i class="el-icon-s-fold" @click="toggleMenu" />
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" :collapse-transition="false" :collapse="isCollapse">
      <el-menu-item index="2">
        <i class="el-icon-menu" />
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-document" />
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting" />
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
  </aside>
</template>

<script>
export default {
  name: 'AsideNav',
  props: {
    collapse: {// 菜单栏是否展开
      type: Boolean,
      default: function() {
        return false
      }
    }
  },
  data() {
    return {
      isCollapse: true
    }
  },
  created() {
    this.isCollapse = this.collapse // 初始化
  },
  methods: {
    /**
     * 菜单栏的展开和收起
     */
    toggleMenu() {
      this.isCollapse = !this.isCollapse
      this.$emit('update:collapse', this.isCollapse)
    }
  }
}
</script>

<style scoped>

</style>
